<template>
  <div class="divSection startPage">
  <img src="static/images/startBg.png" class="imgStartBg" />
  <img src="static/images/startBtn.png" class="imgStartBtn" id="startBtn" @click="uploadVideo">
 </div>
</template>
<style type="text/css">
  .startPage{
    position: absolute;
    top:0;
    left: 0;
    background-position: bottom center;
    background-size: 100% auto;
  }
  .tip{
   position: absolute;
   left: 0.1rem;
   bottom: 0.1rem;
   color: #fff;
   font-size: 0.3rem;
   z-index: 9999;
 }
 .imgBubble{
  display: none;
}
.imgStartBg{
  position: absolute;
  width:100%;
  bottom:0rem;
  left:0rem;
  z-index:100;
}
.imgBottle{
 position: absolute;
 width:100%;
 bottom:0rem;
 left:0rem;
 z-index:999;
}
.imgStartBtn{
  bottom: 1rem;
  left: 2.7rem;
  width: 4.613rem;
  height: 1.08rem;
  position: absolute;
  z-index: 9999;
  transition: transform 0.2s;
}
.bubble{
  position: absolute;
  width:10rem;
  height: 17.773rem;
  bottom: 0rem;
  left: 0rem;
  z-index: 990;
}
.ruleBtn{
 position: absolute;
 bottom: 15.15rem;
 left: 9.02rem;
 width: 0.6rem;
 height: 0.6rem;
 background-color: #fff;
 opacity: 0;
 z-index: 9999;   
}
.imgRules{
 position: absolute;
 width:100%;
 bottom:0rem;
 left:0rem;
 z-index: 9999;
}
.hook{
 bottom: 2rem;
 left: 3.2rem;
 width: 0.30667rem;
 height: 0.34667rem;
 position: absolute;
 z-index: 9999;
}
.agreeBtn{
  position: absolute;
  bottom: 1.8rem;
  left: 3.7rem;
  width: 3rem;
  height: 0.6rem;
  background-color: #fff;
  opacity: 0;
  z-index: 9999;   
}
.hookBtn{
  position: absolute;
  bottom: 1.8rem;
  left: 3.02rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #fff;
  opacity: 0;
  z-index: 9999;
}
.closeBtn{
 position: absolute;
 bottom: 13.2rem;
 left: 8rem;
 width: 0.7rem;
 height: 0.7rem;
 background-color: #fff;
 opacity: 0;
 z-index: 9999;
}
</style>
<script type="text/javascript">
  export default{
    data(){
      return {
        fileInput:null,
      } 
    },
    mounted(){
      this.fileInput = $('<input type="file" accept="video/*" name="videoInput" />').appendTo('body');
      this.fileInput.off().on('change', this.fileSelect);
    },
    methods:{
      startShow:function(){
        console.log("startShow");
      },
     fileSelect:function(e){
      console.log(e);
      var file = e.target.files[0];
      var maxSize = 1024 * 1500 * 3;
      if(browser.versions.android){
        maxSize = 1024 * 12000;
      }
      if(file){
        if(file.size > maxSize){
          console.log(file.size + ":" + maxSize);
        }else{
          console.log(file.size + ":" + maxSize);
          fileObj = file;
          uploadErrTip.hide();
        }
      }else{
        console.log('添加视频失败，请重新添加');
      }
      console.log(file);
    },
    uploadVideo:function(){
          this.fileInput.click();
    }
  }
}
</script>